<template>
  <div class="wrap">
    <p class="p1">订单详情</p>
    <div class="body">
      <el-form ref="form" :model="form" label-width="80px">
        <el-form-item label="订单号">
          <el-input v-model="form.orderNo" disabled></el-input>
        </el-form-item>
        <el-form-item label="创建时间">
          <el-input v-model="form.createTime" disabled></el-input>
        </el-form-item>
        <el-form-item label="收件人">
          <el-input v-model="receiverName" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单状态">
          <el-input v-model="form.statusDesc" disabled></el-input>
        </el-form-item>
        <el-form-item label="支付方式">
          <el-input v-model="form.paymentTypeDesc" disabled></el-input>
        </el-form-item>
        <el-form-item label="订单金额">
          <el-input v-model="form.payment" disabled></el-input>
        </el-form-item>
      </el-form>
    </div>
    <div class="fot">
      <el-table :data="tableData" border style="width: 100%">
        <el-table-column prop="date" label="商品图片">
          <template slot-scope="scope">
              <img :src="src" alt="">
          </template>
        </el-table-column>
        <el-table-column prop="productName" label="商品信息"></el-table-column>
        <el-table-column prop="currentUnitPrice" label="单价"></el-table-column>
        <el-table-column prop="quantity" label="数量"></el-table-column>
        <el-table-column prop="totalPrice" label="合计"> </el-table-column>
      </el-table>
    </div>
  </div>
</template>

<script>
import { getOrderDetail } from "@/utils/request.js";
export default {
  name: "OrderDetail",
  data() {
    return {
      form: {},
      orderNo: this.$route.query.orderNo,
      receiverName: "",
      tableData: [],
      src: "",
    };
  },
  created() {
    getOrderDetail(this.orderNo).then((res) => {
    //   console.log(res);
      this.form = res.data;
      this.tableData.push(res.data.orderItemVoList[0])
      this.src = `${res.data.imageHost}${res.data.orderItemVoList[0].productImage}`;
      this.receiverName = `${res.data.shippingVo.receiverName},${res.data.shippingVo.receiverProvince},${res.data.shippingVo.receiverAddress}`;
    });
  },
  methods: {},
  components: {},
};
</script>

<style lang="scss" scoped>
.wrap {
  .p1 {
    text-align: left;
    font-size: 40px;
    margin: 10px 0 20px 0;
  }
  .fot{
      img{
          width: 100px;
          height: 100px;
      }
  }
}
</style>
